<template>
	<van-popup :visible.sync="visible" v-model="visible" :close-on-click-overlay="false">
		<div class="appointment">
			<h3 class="title">绑定你的手机号</h3>
			<van-form
				ref="form"
				@submit="onSubmit"
				@failed="onFailed"
				:show-error-message="false"
				class="form"
			>
				<p>订单号：{{ order_sn }}</p>
				<p style="color: #f38a8e">亲爱的客户，请填写您的联系方式，以便获取优惠信息</p>
				<div class="form-item" style="margin-top: 20px">
					<label>姓名</label>
					<van-field v-model.trim="form.name" placeholder="姓名" />
				</div>
				<div class="form-item required">
					<label>手机号</label>
					<van-field
						v-model.trim="form.mobile"
						type="tel"
						placeholder="手机号"
						maxlength="11"
						:rules="rules.mobile"
					/>
				</div>
				<!-- <div class="form-item">
					<label for="address">联系地址</label>
					<input id="address" v-model.trim="form.address" placeholder="联系地址" />
				</div> -->
				<div class="form-item">
					<label>联系地址</label>
					<van-field
						v-model.trim="form.address"
						placeholder="联系地址"
						name="address"
						rows="2"
						autosize
						type="textarea"
					/>
				</div>
				<div class="form-item">
					<label>预到店时间</label>
					<van-field
						v-model="form.appoint_date"
						placeholder="预到店时间"
						name="appoint_date"
						readonly
						@click="openAppointDate"
					>
						<van-icon slot="right-icon" name="arrow" color="#ccc" />
					</van-field>
					<date-picker
						ref="datePicker"
						:min-date="appointDate.min"
						:max-date="appointDate.max"
						@confirm="appointDateConfirm"
					/>
				</div>
			</van-form>
			<div class="btns">
				<div class="btn" @click="close">取 消</div>
				<div class="btn submit" @click="clickSubmit">确 认</div>
			</div>
		</div>
	</van-popup>
</template>
<script>
// import Popup from "@/components/popup";
const mobileReg = /^[1][3-9][0-9]{9}$/;
import qs from "qs";
import DatePicker from "@/components/date-picker";
import dayjs from "dayjs";

export default {
	components: {
		// Popup,
		DatePicker
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		order_sn: {
			type: [String, Number]
		},
		tpl: {
			type: Object,
			default: () => ({})
		},
		customer: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		let now = dayjs();

		return {
			appointDate: {
				min: now.add(1, "d").toDate(),
				max: now.add(30, "d").toDate()
			},
			visible: false,
			form: {
				name: "",
				mobile: "",
				city: "",
				address: "",
				appoint_date: ""
			},
			rules: {
				mobile: [
					{ required: true, message: "请填手机号" },
					{ pattern: mobileReg, message: "手机号格式不正确" }
				],
				address: [{ required: true, message: "请填详细地址" }]
			}
		};
	},
	methods: {
		open(city) {
			this.visible = true;
			this.form.address = city;
		},
		close() {
			this.visible = false;
			this.$emit("input", false);
			this.form = {
				name: "",
				mobile: "",
				city: "",
				address: "",
				appoint_date: ""
			};
		},
		openAppointDate() {
			this.$refs.datePicker.open();
		},
		appointDateConfirm(v) {
			this.form.appoint_date = dayjs(v).format("YYYY-MM-DD");
		},
		// 表单错误
		onFailed({ errors }) {
			this.$toast({
				message: errors[0].message,
				position: "top"
			});
		},
		clickSubmit() {
			this.$refs.form.submit();
		},
		async onSubmit() {
			// this.$toast(this.$api === undefined);
			// return;

			let toast = this.$toast.loading();
			const { query } = this.$route;
			const { is_payment, biz_id, id: view_id, form_type, form_pay, pay_money } = this.tpl;

			let queryStr = qs.stringify(query) || "";
			// const { user_id } = this.customer;
			const { name, mobile, city, address, ...args } = this.form;

			let form = {
				name,
				mobile,
				city,
				address,
				data_set: JSON.stringify(args),
				ad_return: queryStr,
				tg_id: query.id,
				tg_type: query.type,
				order_sn: this.order_sn,
				biz_id,
				view_id,
				is_payment,
				form_type,
				form_pay,
				pay_money
				// user_id
			};
			this.$emit("appoint");
			const res = await this.$api.adSubmit(form).catch((err) => {
				toast.clear();
				this.$toast(err);
				throw err;
			});
			toast.clear();

			// this.$toast("预约成功");
			location.href = res.url;
			// this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.van-popup {
	border-radius: 5px;
	background-color: transparent;
}
.appointment {
	font-size: 0.3111rem;
	background: #fff;
	// padding: 10px;
	border-radius: 5px;
	max-height: 100%;
	max-width: 640px;
	width: 80vw;
	margin: auto;
	overflow: auto;
	padding: 0;
	.btns {
		display: flex;
		text-align: center;
		// border-top: solid 1px #ebedf0;
		cursor: pointer;
		font-size: 0.35555rem;
		/* color: #909399; */
		.btn {
			flex: 1;
			padding: 0.33333rem;
			box-shadow: 1px 0 1px -1px #969797;
			border-top: solid 1px #ebedf0;
			&.submit {
				box-shadow: none;
				background-color: #ff4b00;
				box-shadow: 1px 0 1px -1px #ff4b00;
				border-top-color: #ff4b00;
				color: #fff;
			}
		}
	}
	.title {
		background-color: #ffa96f;
		color: #fff;
		margin: 0;
		padding: 0.22222rem;
		text-align: center;
	}
	::v-deep .van-cell {
		margin: 5px 0 16px;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		padding: 8px 12px;
	}
	.form {
		padding: 0.44444rem;
		width: 100%;
		box-sizing: border-box;
		p {
			margin-bottom: 5px;
			color: #999;
			font-size: 0.3111rem;
		}
		&-item {
			margin-bottom: 0.222222rem;
			label {
				color: #666;
				position: relative;
			}
			&.required label::after {
				content: "*";
				position: absolute;
				right: -8px;
				top: 0;
				color: red;
			}
			input {
				width: 100%;
				margin-top: 5px;
				// line-height: 1.5;
				height: 1rem;
				padding: 0 0.26666rem;
				border: 1px solid #dcdfe6;
				background-image: none;
				border-radius: 4px;
				-webkit-appearance: none;
			}
		}
	}
}
</style>
